<template>
    <a-row>
        <a-col class="ud-box" :span="width">
            <div class="title-input" :class="inputFocus?'title-input-active':''">
                <a-textarea style="resize: none;" auto-size @blur="iBlur" @focus="iFocus" @change="newTitle = title" ref="titleInput" :maxLength="50" v-model="title" placeholder="请输入标题"></a-textarea>
                <p @click="pFocus" v-html="newTitle">{{newTitle}}</p>
                <a-tooltip class="title-length" title="文章标题">{{title.length}}/50</a-tooltip>
            </div>
            <vue-ueditor-wrap editorId="editor" style="margin:15px 0" v-model="data.content" :config="myConfig"></vue-ueditor-wrap>
            <!-- 引用清单 -->
            <div class="text-list">
                <a-table size="small" :columns="columns" :data-source="tableList" rowKey="id" :pagination="false">
                    <template slot-scope="text,record" slot="titleName">
                        <div @click="openLink(record.id,1)" class="file-name-style">{{record.titleName}}</div>
                    </template>
                    <template slot-scope="text,record" slot="updateTime">
                        <div style="fontSize: 16px; color: #737982">{{record.updateTime}}</div>
                    </template>
                    <template slot-scope="text,record" slot="status">
                        <span :style="{'color':record.status == 0?'#737982': record.status == 1? 'orange' : record.status == 2 ? '#f50' : '#000', 'fontSize': '16px'}">{{record.status|fileStatus}}</span>
                    </template>
                    <template slot-scope="text,record" slot="action">
                        <i class="iconfont suncnui-icon-lajixiang" @click="removeText(record)"></i>
                    </template>
                </a-table>
            </div>
            <p class="table-more" @click="tableMore">查看更多···</p>
            <div class="error-button-box" style="background-color: #f5f5f5;padding:10px 0px">
                <a-button type="primary" @click="submitArticle">发布</a-button>
                <a-button style="background-color: transparent;" @click="submitArticle(0)">暂存</a-button>
                <a-button style="background-color: transparent;" @click="ueditorBack">返回</a-button>
            </div>
        </a-col>
        <a-col class="error" :span="24 - width - 3">
            <h5 class="title">
                {{errorTitle}}
                <a-icon type="close" @click="width = 21;errorType = 0" />
            </h5>
            <div class="mgError" v-if="errorType === 1">
                <!-- 错误类型 -->
                <div class="title">
                    <span>敏感词</span>
                    <span>类型</span>
                </div>
                <ul>
                    <li :key="item.id" v-for="(item,index) in sensitiveList">
                        <span>{{item.oldText}}</span>
                        <span>{{item.newText}}</span>
                    </li>
                </ul>
                <div class="error-button-box">
                    <a-button type="primary" @click="sensitiveTagging">一键标注</a-button>
                </div>
            </div>
            <div v-if="errorType === 2">
                <!-- 错误类型 -->
                <div :style="{ padding: '0 10px' }">
                    <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">全选</a-checkbox>
                </div>
                <ul>
                    <template v-for="(item,index) in solutionList">
                        <li :key="item.id" v-if="item.show">
                            <a-checkbox @change="checkChange" :value="item.id" v-model="item['checked']">{{item.id}}</a-checkbox>
                            <span>{{item.oldText}}</span>
                            <a-icon style="color:red" type="arrow-right" />
                            <span>{{item.newText}}</span>
                        </li>
                    </template>
                </ul>
                <div class="error-button-box">
                    <!-- <a-button type="primary" @click="taggingText">一键标注</a-button> -->
                    <a-button type="primary" @click="correctText">一键纠正</a-button>
                </div>
            </div>
            <!-- 自动摘要 -->
            <div class="zy" v-if="errorType === 3">
                <!-- 错误类型 -->
                <p>ssssssssssssssssssss</p>
            </div>
            <!-- 一键查新 -->
            <div class="cx" v-if="errorType === 4">
                <!-- 错误类型 -->
                <ul>
                    <li :key="item.id" v-for="(item,index) in checkNewList">
                        <p @click="openLink(item.url)">{{item.title}}</p>
                        <span style="color:#3bb941" v-if="item.num<=33">相似度：{{item.num}}</span>
                        <span style="color:#fd9918" v-else-if="item.num>33 && item.num<=66">相似度：{{item.num}}</span>
                        <span style="color:#f05646" v-else-if="item.num>66">相似度：{{item.num}}</span>
                    </li>
                </ul>
            </div>
        </a-col>
        <a-col :span="3" class="tips">
            <!-- tips -->
            <ul>
                <li @click="checkText(1)">
                    <img src="@/assets/images/ue/check1.png" alt />
                    <img src="@/assets/images/ue/check1-1.png" alt />
                    <p>敏感检查</p>
                </li>
                <li @click="checkText(2)">
                    <img src="@/assets/images/ue/check2.png" alt />
                    <img src="@/assets/images/ue/check2-1.png" alt />
                    <p>文本纠错</p>
                </li>
                <li @click="checkText(3)">
                    <img src="@/assets/images/ue/check3.png" alt />
                    <img src="@/assets/images/ue/check3-1.png" alt />
                    <p>自动摘要</p>
                </li>
                <li @click="checkText(4)">
                    <img src="@/assets/images/ue/check4.png" alt />
                    <img src="@/assets/images/ue/check4-1.png" alt />
                    <p>一键查新</p>
                </li>
            </ul>
        </a-col>
    </a-row>
    <!-- /<[^>]+>/g -->
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap"; // ES6 Module
export default {
    props: ["data"],
    data() {
        return {
            id: "",
            msg: "",
            title: "",
            newTitle: "",
            myConfig: {
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                // 初始容器高度
                initialFrameHeight: 400,
                // 初始容器宽度
                initialFrameWidth: "100%",
                // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！部署在国外的服务器，如果无法访问，请自备梯子）
                serverUrl: "http://35.201.165.105:8000/controller.php",
                // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                UEDITOR_HOME_URL: process.env.BASE_URL + "UEditor/",
            },
            width: 21, //15 or 21
            solutionList: [
                {
                    id: 1,
                    oldText: "一",
                    newText: "二",
                    checked: false,
                    index: 1,
                    show: true,
                    type: "title",
                },
                {
                    id: 2,
                    oldText: "一",
                    newText: "二",
                    checked: false,
                    index: 1,
                    show: true,
                    type: "content",
                },
                {
                    id: 3,
                    oldText: "三",
                    newText: "四",
                    checked: false,
                    index: 1,
                    show: true,
                    type: "content",
                },
                {
                    id: 4,
                    oldText: "三",
                    newText: "四",
                    checked: false,
                    index: 2,
                    show: true,
                    type: "content",
                },
            ],
            sensitiveList: [
                {
                    oldText: "三",
                    newText: "四",
                    type: "title",
                },
                {
                    oldText: "一",
                    newText: "二",
                    type: "content",
                },
            ],
            checkNewList: [
                {
                    title:
                        "南京阿姨退休后乘风破浪，走上国际T台南京阿姨退休后乘风",
                    num: 30,
                    url: "www.baidu.com",
                },
                {
                    title:
                        "南京阿姨退休后乘风破浪，走上国际T台南京阿姨退休后乘风",
                    num: 70,
                    url: "www.baidu.com",
                },
            ],
            errorTitle: "文本纠错",
            errorType: 0,
            tableList: [
                {
                    id: 1,
                    titleName:
                        "关于更好发挥企业家在经济决策和促进企业业家在经济决策...",
                    updateTime: "2020-07-25 08:28:32",
                    content: "",
                    status: 2,
                },
                {
                    id: 2,
                    titleName: "关于更好发挥企业家在经济决策和促进企业",
                    content: "",
                    updateTime: "2020-07-25 08:28:32",
                    status: 0,
                },
                {
                    id: 3,
                    titleName: "关于更好发挥企业家在经济决策和促进企业",
                    updateTime: "2020-07-25 08:28:32",
                    status: 0,
                },
                {
                    id: 3,
                    titleName: "关于更好发挥企业家在经济决策和促进企业",
                    updateTime: "2020-07-25 08:28:32",
                    status: 0,
                },
                {
                    id: 3,
                    titleName: "关于更好发挥企业家在经济决策和促进企业",
                    updateTime: "2020-07-25 08:28:32",
                    status: 0,
                },
            ],
            columns: [
                {
                    title: "文件名称",
                    dataIndex: "titleName",
                    align: "center",
                    ellipsis: true,
                    scopedSlots: { customRender: "titleName" },
                },
                {
                    title: "更新时间",
                    dataIndex: "updateTime",
                    width: "120px",
                    align: "center",
                    scopedSlots: { customRender: "updateTime" },
                },
                {
                    title: "类型",
                    dataIndex: "status",
                    width: "150px",
                    align: "center",
                    scopedSlots: { customRender: "status" },
                },
                {
                    title: "操作",
                    dataIndex: "action",
                    width: "60px",
                    align: "center",
                    scopedSlots: { customRender: "action" },
                },
            ],
            indeterminate: false,
            checkAll: false,
            inputFocus: false,
        };
    },
    components: {
        VueUeditorWrap,
    },
    mounted() {
        this.id = this.data.id;
        this.title = this.data.titleName;
        this.newTitle = this.data.titleName;
        this.msg = this.data.msg;
    },
    methods: {
        changePage() {},
        //标注错误文本带序号
        taggingText() {
            if (!this.msg) return false;
            this.solutionList.forEach((item, i) => {
                let regex = new RegExp(item.oldText, "g");
                let ar = [];
                if (item.type === "title") {
                    ar = ["newTitle", "title"];
                    // this.newTitle = this.arrJoinHandle(
                    //     this.title.split(regex),
                    //     `<span id='error_${item.id}' style='color: #e53639;'>${item.oldText}<i style='font-style: normal;font-weight: normal;border: 1px solid #E53693;border-radius: 50px;
                    //     padding: 0 0px;font-size: 12px; line-height: 1;width: 12px;display: inline-block; height: 12px;text-align: center;position: relative;top: -8px;'>${item.id}</i></span>`,
                    //     item.oldText,
                    //     item.index
                    // );
                } else {
                    ar = ["msg", "msg"];
                }
                this[ar[0]] = this.arrJoinHandle(
                    this[ar[1]].split(regex),
                    `<span id='error_${item.id}' style='color: #e53639;'>${item.oldText}<i style='font-style: normal;font-weight: normal;border: 1px solid #E53693;border-radius: 50px;
                        padding: 0 0px;font-size: 12px; line-height: 1;width: 12px;display: inline-block; height: 12px;text-align: center;position: relative;top: -8px;'>${item.id}</i></span>`,
                    item.oldText,
                    item.index
                );
            });
            // let item = this.solutionList[1]
            // console.log(item)
            // let regex = new RegExp(item.oldText, "g");

            //     this.msg = this.arrJoinHandle(
            //         this.msg.split(regex),
            //         `<span style='color: #e53639;font-weight: bold;'>${item.oldText}</span>`,
            //         item.oldText,
            //         item.index
            //     );
        },
        //一键纠正
        correctText() {
            let uu = window["UE"].getEditor("editor");
            this.solutionList.forEach((item, index) => {
                if (item.checked && item.show) {
                    let dom;
                    if (item.type === "title") {
                        dom = document.getElementById("error_" + item.id);
                    } else {
                        dom = uu.document.getElementById("error_" + item.id);
                    }
                    dom.innerHTML = item.newText;
                    dom.style.color = "#1cd536";
                    item.show = false;
                    item.checked = false;
                    if (item.type === "title") {
                        this.$nextTick(() => {
                            this.newTitle = dom.parentNode.innerHTML;
                            this.title = dom.parentNode.innerHTML
                                .split(/<[^>]+>/g)
                                .join("");
                        });
                    }
                }
            });
        },
        removeText(record) {
            this.$message.success("点击了删除操作");
        },
        onCheckAllChange(e) {
            Object.assign(this, {
                indeterminate: false,
                checkAll: e.target.checked,
            });
            this.solutionList.forEach((element) => {
                element.checked = e.target.checked;
            });
        },
        arrJoinHandle(arr, str, oldStr, index = 1) {
            let LEN = arr.length;
            let arrStr = "";
            for (let i = 0; i < LEN; i++) {
                if (i === index) {
                    arrStr += str + arr[i];
                } else if (i === 0) {
                    arrStr += arr[i];
                } else {
                    arrStr += oldStr + arr[i];
                }
            }
            return arrStr;
        },
        checkText(type) {
            // var uu = window["UE"].getEditor("editor");
            // window['UE'].dom.domUtils.setStyles(uu.body,{'position':'relative','top':'0px'})
            // console.log(document.getElementById("ueditor_0").scrollTop);
            // console.log(uu.document.getElementsByTagName("html")[0].scrollTop); //获取高度
            // uu.document.getElementsByTagName("html")[0].scrollTop = 10; //设置高度
            // 获取高度
            // console.log(window['UE'].dom.domUtils.getXY(uu.document.getElementsByTagName('p')[0]));

            // var rg = new window['UE'].dom.Range(uu.document.getElementsByTagName('p')[0])
            // rg.scrollToView(100)
            // uu.focus(true)
            // window['UE'].dom.domUtils.insertAfter('p','asd')
            //获取editor
            // console.log( uu.document.getElementsByTagName('p'))
            // console.log(window['UE'].dom.domUtils.getElementsByTagName(node,tagName))
            //  console.log(window['UE'].dom.domUtils.getXY(uu.document.getElementsByTagName('p')[0]));
            if (this.errorType === type) {
                return false;
            }
            this.errorType = type;

            switch (type) {
                case 1:
                    this.errorTitle = "敏感检查";
                    this.reset();
                    break;
                case 2:
                    this.errorTitle = "文本纠错";
                    this.taggingText();
                    break;

                case 3:
                    this.errorTitle = "自动摘要";
                    this.reset();
                    break;

                case 4:
                    this.errorTitle = "一键查新";
                    this.reset();
                    break;

                default:
                    break;
            }
            this.width = 15;
        },
        checkChange(e) {
            let arr = [];
            this.solutionList.forEach((element) => {
                if (element.checked || !element.show) {
                    arr.push(true);
                }
            });
            Object.assign(this, {
                // indeterminate:
                //     arr.length != this.solutionList.length && arr.length !== 0,
                checkAll: arr.length == this.solutionList.length,
            });
            if (e.target.checked && e.target.show) {
                //和ue交互
                let uu = window["UE"].getEditor("editor");
                let xy = window["UE"].dom.domUtils.getXY(
                    uu.document.getElementById("error_" + e.target.value)
                );
                uu.document.getElementsByTagName("html")[0].scrollTop =
                    xy.y - 20;
            }
        },
        //一键标注敏感词
        sensitiveTagging() {
            this.sensitiveList.forEach((item, i) => {
                let regex = new RegExp(item.oldText, "g");
                if (item.type === "title") {
                    this.newTitle = this.title.replace(
                        regex,
                        `<span style='color: #e53639;'>${item.oldText}</span>`
                    );
                } else {
                    this.msg = this.msg.replace(
                        regex,
                        `<span style='color: #e53639;'>${item.oldText}</span>`
                    );
                }
            });
        },
        reset() {
            let uu = window["UE"].getEditor("editor");
            this.solutionList.forEach((item, index) => {
                let dom = uu.document.getElementById("error_" + item.id);
                if (dom) {
                    dom.style.color = "inherit";
                    dom.removeAttribute("id");
                    if (item.show) {
                        dom.innerHTML = item.oldText;
                    } else {
                        dom.innerHTML = item.newText;
                    }
                }

                //    item.show = false
                //    item.checked = false
            });
            this.sensitiveList.forEach((item, i) => {
                let regex = new RegExp(
                    `<span style="color: #e53639;">${item.oldText}</span>`,
                    "g"
                );
                if (this.msg) this.msg = this.msg.replace(regex, item.oldText);
            });
            this.newTitle = this.title;
        },
        openLink(url, type = 0) {
            if (type) {
                const { href } = this.$router.resolve({
                    path: '/article/detail/'+url,
                });
                window.open(href, "_blank");
            }else{
                 window.open(url, "_blank");
            }
        },
        ueditorBack() {
            this.$emit("ueditorBack");
        },
        iBlur() {
            this.inputFocus = false;
        },
        iFocus() {
            this.inputFocus = true;
        },
        pFocus() {
            this.$refs.titleInput.focus();
        },
        tableMore() {
            this.tableList.push(...this.tableList);
        },
        submitArticle(type = 1) {
            if (!this.title) {
                this.$message.destroy();
                this.$message.error("请输入标题");
            }
            if (type) {
                //提交
            } else {
                //暂存
            }
        },
    },
    computed: {},
    destroyed() {
        window["UE"].getEditor("editor").destroy();
    },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.ant-row {
    align-items: stretch;
    display: flex;
    min-height: 800px;
    height: 100%;
    margin-top: -44px;
    padding-top: 50px;
    max-height: 100%;

    /deep/ th {
        background-color: #f1f2f6 !important;
        color: #656b90;
    }

    /deep/.ant-table-small {
        border: none;

        /deep/.ant-table-body {
            margin: 0;
        }
    }
}

.ud-box {
    padding: 8px;
    overflow: auto;
}

.tips {
    padding: 4px;
    overflow: hidden;

    li {
        border: 1px solid #ececec;
        position: relative;
        padding-top: 60px;

        img {
            display: block;
            margin: 14px auto;
            width: 60%;
            max-width: 44px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0px;
            opacity: 1;
        }

        img+img {
            opacity: 0;
        }

        p {
            text-align: center;
            font-size: 14px;
            color: #333;
        }

        height: 94px;
        margin-bottom: 7px;
        cursor: pointer;

        &:hover {
            background-color: #07a6f0;
            border: 1px solid #07a6f0;

            p {
                color: #fff;
            }

            img {
                opacity: 0;
            }

            img+img {
                opacity: 1;
            }
        }
    }
}

.error {
    border: 1px solid #ececec;

    ul {
        padding: 0 10px;
    }

    li {
        font-size: 16px;
        border-bottom: 1px solid #ececec;
        padding-bottom: 12px;
        padding-top: 10px;

        /deep/ .ant-checkbox-wrapper {
            margin-right: 10px;
        }

        span {
            width: 50px;
            display: inline-block;
        }

        .anticon {
            padding: 0 10px;
        }
    }
}

.title {
    color: #333333;
    font-weight: bold;
    font-size: 14px;
    line-height: 36px;
    position: relative;
    padding: 0 14px;

    i {
        cursor: pointer;
        color: #989393;
        position: absolute;
        right: 14px;
        top: 11px;
    }
}

.ant-btn {
    width: 84px;
    background-color: #1694cf;
    margin: 0 10px;
    border-color: #1694cf;
}

.ant-btn + .ant-btn {
    color: #1694cf;
}

.error-button-box {
    display: flex;
    justify-content: center;
}

.mgError {
    padding: 0 10px;

    .title {
        font-size: 0px;
        background-color: #f1f2f6;
        width: 100%;
        line-height: 0;

        span {
            width: 70%;
            display: inline-block;
            font-size: 14px;
            color: #656b90;
            line-height: 32px;
        }

        span+span {
            width: 30%;
        }
    }

    ul {
        padding: 0;
    }

    li {
        font-size: 16px;
        border-bottom: 1px solid #ececec;
        padding-bottom: 0px;
        padding-top: 0px;
        font-size: 0px;
        width: 100%;
        line-height: 0;
        padding: 0 14px;

        span {
            width: 70%;
            display: inline-block;
            font-size: 14px;
            color: #656b90;
            line-height: 32px;
        }

        span+span {
            width: 30%;
        }
    }
}

.cx {
    p {
        margin-bottom: 10px;
        font-size: 16px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    li span {
        font-size: 14px;
        width: 100%;
    }
}

.zy {
    p {
        font-size: 16px;
        padding: 14px;
        margin-bottom: 10px;
        padding-top: 0px;
    }
}

.title-input {
    position: relative;

    /deep/ .ant-input {
        color: transparent;
        transition: none;
    }

    p {
        position: absolute;
        top: 6px;
        left: 12px;
        width: 96%;
    }

    .title-length {
        position: absolute;
        right: 6px;
        bottom: 6px;
    }
}

.title-input-active {
    /deep/ .ant-input {
        color: inherit;
    }

    p {
        display: none;
    }
}

.table-more {
    text-align: center;
    cursor: pointer;
}

.file-name-style {
    cursor: pointer;

    &:hover {
        color: #1694cf;
    }
}
</style>
